import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { Route, withRouter, Switch} from 'react-router-dom';
import { ListViewPage } from 'weaver-mobile-page';
import { Icon} from 'weaver-mobile';
import { Base64 } from 'js-base64';
import { asyncComponent } from 'react-async-component';
import ComReplyItem from '../../governTools/comReplyItem/comReplyItem.js';
const coms = {
  ComreRichText: asyncComponent({
    resolve: () => import("../../governTools/comreRichText/comreRichText.js")
  })
};
@inject('opinionStore')
@withRouter
@observer
/*
 * @info: 评论的评论组件
 * @Author: lusx
 * @Date: 2019-12-01 11:13:16
 * @Last modified by:   lusx
 * @Last modified time: 01-04-2019 03:45:17
 */
export default class OpinionChildPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      instructTop:{},
      taskId:"",
      instructTopid:"",
      instructType: "1",//动作类型: 1,评论;0:汇报
      isrender:false
    }
  }
  componentWillMount() {
    const {opinionStore:{initComment,listViewCommentStore:{current,pageSize}},location} = this.props;
    const id = new URLSearchParams(location.search).get('id');
    const instructTopid = new URLSearchParams(location.search).get('instructTopid');
    const instructType = new URLSearchParams(location.search).get('instructType');
    const params = {
      'pageindex':current,
      'pagesize':pageSize,
      'taskId':id,
      'id':instructTopid,
    }
    initComment(params).then((data)=>{
      this.setState(()=>({
        instructTop :data,
        taskId: id,
        instructTopid: instructTopid,
        instructType: instructType,
        isrender:true
      }))
    });
  }
  componentWillReceiveProps(nextProps){
  }
  componentWillUnmount(){
    const {opinionStore:{listViewCommentStore}} = this.props;
    listViewCommentStore.clearData()
  }
  render() {
    if(this.state.isrender === true){
      const { opinionStore:{listViewCommentStore,onEndReached,onRefresh} } = this.props;
      const {instructTop,taskId,instructTopid,instructType} = this.state;
      const editType = {
        "0" : "editReply0",//汇报
        "1" : "editReply1"//评论
      }
        return (
          <div className='g-opinionChildPage'>
            <div className='g-opinionChildPage-container' key={instructTop.id}>
              <ComReplyItem  replyData={instructTop} editType={editType[instructType]} taskId={taskId} instructTopid={instructTopid} />
            </div>
            <ListViewPage.Normal
              store={listViewCommentStore}
              getDataCustom={true}
              getTemplate={this.getTemplate}
              onEndReached={(event) => onEndReached(event)}
              onRefresh={(event) => onRefresh(event)}
            />
          </div>
        );
    }else{
      // 可以优化
      return <div></div>
    }

  }
  getTemplate = (template) => {
    const {opinionStore:{setInstructid},history,match} = this.props;
    const {taskId,instructTopid,instructType} = this.state;
    const newTemp = {
      ...template,
      default: [{
        key: 'col_1',
        render: (data) => {
          const {userName,content,instruUserName,createdate} = data;
          return (
            <OpinionChildItemPage  data={data} history={history} match={match} setInstructid={setInstructid} taskId={taskId} instructTopid={instructTopid} instructType={instructType}/>
          );
        },
      }],
    };
    return newTemp;
  }
}

class OpinionChildItemPage extends Component{
  constructor(props) {
    super(props);
  }
  render(){
    const {data,history,match:{url},setInstructid,taskId,instructTopid,instructType} = this.props;
    const {id} = data;
    const path = url.substr(0,url.indexOf('/opinionChild'));
    setInstructid(id);
    const editType = {
      "0" : "editRreply0",//汇报
      "1" : "editRreply1"//评论
    }
    return(
      <div key={id} className='g-opinionChildItemPage'>
        <ComReplyItem  replyData={data} editType={editType[instructType]} taskId={taskId} instructTopid={instructTopid} />
      </div>
    )
  }
}
